export const drawingRender = (ctx, drawing) => {

  drawLineWithExtension(ctx, drawing), drawAngleWithNumber(ctx, drawing);
  drawOuterAngleWithNumber(ctx, drawing);
  drawing.circleLocation.forEach((item) => {
    const { point, num, isFilled, color } = item;
    drawCircle(ctx, point[0], point[1], color, num, isFilled);
  });
  generateEquation (ctx,drawing)
};
const drawLineWithExtension = (ctx, drawing) => {
  const { filteredData, clickPoint, isOvaerLapAngle } = drawing;
  let slopes = [];
  filteredData.forEach((item) => {
    for (const key in item) {
      const element = item[key];
      let slope = calculateSlope(
        clickPoint[0],
        clickPoint[1],
        element[0],
        element[1]
      );
      slope = parseFloat(slope.toFixed(1));
      slopes.push(slope);
    }
  });
  filteredData.forEach((item) => {
    for (const key in item) {
      const element = item[key];
      let slope = calculateSlope(
        clickPoint[0],
        clickPoint[1],
        element[0],
        element[1]
      );
      slope = parseFloat(slope.toFixed(1));
      let isExtend = compareSlopes(slopes, slope);
      // 绘制原始直线
      ctx.beginPath();
      ctx.moveTo(clickPoint[0], clickPoint[1]);
      ctx.lineTo(element[0], element[1]);
      ctx.lineWidth = 4;
      ctx.strokeStyle = "red";
      ctx.stroke();
      // 绘制反向延长线
      if (isExtend && !isOvaerLapAngle) {
        // 计算反向延长线的坐标
        let extensionEndX = clickPoint[0] - (element[0] - clickPoint[0]);
        let extensionEndY = clickPoint[1] - (element[1] - clickPoint[1]);
        ctx.beginPath();
        ctx.moveTo(clickPoint[0], clickPoint[1]);
        ctx.lineTo(extensionEndX, extensionEndY);
        ctx.lineWidth = 4;
        ctx.strokeStyle = "red";
        ctx.stroke();
      }
    }
  });
};
// 绘制圆弧标注角度 ，写数字
const drawAngleWithNumber = (ctx, drawing) => {
  const { filteredData, clickPoint } = drawing;
  for (let i = 0; i < filteredData.length; i++) {
    let item = Object.values(filteredData[i]);
    for (let j = 0; j < item.length; j++) {
      if (j == 0) {
        let x1 = clickPoint[0];
        let y1 = clickPoint[1];
        let x2 = item[j][0];
        let y2 = item[j][1];
       
        let x4 = item[j + 1][0];
        let y4 = item[j + 1][1];
       
    
        let startAngle = Math.atan2(y2 - y1, x2 - x1);
        let endAngle = Math.atan2(y4 - y1, x4 - x1);
        if (startAngle > endAngle) {
          // 如果是，则交换它们的值
          let temp = startAngle;
          startAngle = endAngle;
          endAngle = temp;
        }
        const color = getRandomColor(i + 1);
        const radius = 50;
        // 画圆弧标注 角度
        ctx.beginPath();
        ctx.arc(x1, y1, radius, startAngle, endAngle);
        ctx.strokeStyle = color;
        ctx.stroke();
        // 写数字
      }
    }
  }
};

//  绘制外角圆弧标注角度，写数字
const drawOuterAngleWithNumber = (ctx, drawing) => {
  // eslint-disable-next-line no-empty
  if (drawing.outerAngle) {
    const { outerAnglePoint1, outerAnglePoint2, clickPoint, num } =
      drawing.outerAngle;
   
    if (outerAnglePoint1 && outerAnglePoint2) {
      let startAngle = Math.atan2(
        outerAnglePoint1[1] - clickPoint[1],
        outerAnglePoint1[0] - clickPoint[0]
      );
      let endAngle = Math.atan2(
        outerAnglePoint2[1] - clickPoint[1],
        outerAnglePoint2[0] - clickPoint[0]
      );
      
      const color = getRandomColor(num);
      const radius = 50;
      ctx.beginPath();
      ctx.arc(clickPoint[0], clickPoint[1], radius, startAngle, endAngle);
      ctx.strokeStyle = color;
      ctx.stroke();
    }
  }
};
const drawCircle = (ctx, textX, textY, color, num, isFilled) => {
  ctx.beginPath();
  ctx.arc(textX, textY, 30, 0, 2 * Math.PI, false);
  ctx.fillStyle = "#63788a";
  if (isFilled) {
    ctx.fill();
  }
  ctx.lineWidth = 2;
  ctx.strokeStyle = color;
  ctx.stroke();
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(num, textX, textY);
};
const generateEquation = (ctx,drawing) => {
    const  {Equation,highPoint} = drawing.generateEquation
    ctx.font = "30px Arial";
    ctx.fillStyle = "red";
    ctx.fillText(
      Equation,
      (highPoint[0] - 40),
      (highPoint[1] + 50)
    );
};
const getRandomColor = (num) => {
  // 生成随机的RGB值
  const data = [
    "#223344",
    "#0330fc",
    "#445588",
    "#fc03f4",
    "#fcd303",
    "#03fcfc",
    "#8899cc",
    "#99aadd",
    "#aabbee",
    "#bbccff",
  ];
  // 拼接成颜色值并返回
  return data[num];
};
const calculateSlope = (x1, y1, x2, y2) => {
  if (x2 - x1 === 0) {
    return y2 > y1 ? Infinity : -Infinity;
  } else {
    return (y2 - y1) / (x2 - x1);
  }
};
const compareSlopes = (slopes, slop) => {
  let num = 0;
  for (let i = 0; i < slopes.length; i++) {
    if (slopes[i] == slop || slop > 200) {
      num++;
    }
  }
  // 根据条件返回 true 或 false
  if (num >= 2) {
    return false;
  } else {
    return true;
  }
};
